<template>
    <div>
        <template v-if="isTree">
            <TreeSelect v-model="model" :multiple="multiple" :disable-branch-nodes="disableBranchNodes" :options="codes" :disabled="disabled" @input="changeCodeOfTree" :placeholder="placeholder"></TreeSelect>
        </template>
        <template v-else>
            <label>
                <Select :disabled="disabled" v-model="model" :multiple="multiple" ref="code" @on-change="changeCode" @on-clear="changeCode" :placeholder="placeholder" clearable>
                    <Option v-for="item in codes" :value="item.id" :label="item.label" :key="item.id" />
                </Select>
            </label>
        </template>
    </div>
</template>

<script>
    import TreeSelect from "@riophae/vue-treeselect";
    import "@riophae/vue-treeselect/dist/vue-treeselect.css";
    import CodeTypeService from '@/service/CodeTypeService'
    export default {
        name: "code-type-tag",
        model: {
            prop: 'value1',
            event: 'change'
        },
        components:{
            TreeSelect
        },
        props:{
            isTree:{
                type: Boolean,
                required: false,
                default: false
            },
            value1:{
                type: [String, Number, Array],
                required: true
            },
            codeType:{
                type: String,
                required: true,
            },
            multiple: {
                type: Boolean,
                required: false,
                default: false
            },
            filters: {
                type: Object,
                required: false,
                default: ()=>{}
            },
            placeholder:{
                type: String,
                required: false,
                default: '',
            },
            disableBranchNodes:{
                type: Boolean,
                required: false,
                default: false
            },
            disabled:{
                type: Boolean,
                required: false,
                default: false
            }
        },
        data(){
            return {
                model: this.value1===''?null:this.value1,
                codes: []
            }
        },
        mounted(){
            this.fetchCodes();
        },
        watch: {
            value1 () {
                this.model = this.value1===''?null: this.value1
                if (this.model) {
                    this.fetchCodes(this.model, this)
                } else if (!this.isTree) {
                    this.$refs.code.clearSingleSelect()
                }
            },
        },
        methods: {
            fetchCodes(){
                CodeTypeService.getCodeTypeList({codeType:this.codeType,filter:this.filters})
                    .then(res=>{
                        this.codes = res
                })
            },
            changeCode: function (item) {
                this.$emit('change', item)
            },
            changeCodeOfTree: function (item) {
                if (item==null){
                    item = ''
                }
                this.$emit('change', item)
            }
        }
    }
</script>

<style scoped>

</style>